<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
	<script type="text/javascript" src="../js/jquery-1.3.2.js"></script>
    <style type="text/css">
		* { margin:0; padding:0;}
		body { font:14px '宋体';}
		li { list-style:none;}
		a { text-decoration:none;}
		a:hover { text-decoration:underline;}
		
		.nav { margin:10px auto; width:600px; background:#333; height:35px; padding:0 10px; color:#F60;}
		.nav li { float:left; padding-right:10px; text-align:center; position:relative; height:35px; line-height:35px;}
		.nav li a { padding:0 10px; height:35px; line-height:35px; display:block; color:#fff; float:left;}
		
		.nav li span { float:left; width:17px; height:35px;}
		.nav li span.subhover { background-position:center bottom; cursor:pointer;}
		
		.subnav {display:none; float:left; position:absolute; top:35px; left:-20px; width:500px; background:#666;}
		.subnav li {padding:0px; width:100px;}
    </style>
    <script type="text/javascript">
		$(document).ready(function() {
			$('<span></span>').insertBefore($('.subnav'));
						
			// 鼠标移动到含有下拉菜单的li标签上时
			$('#nav2 li').hover(function() {
				$(this).find('span').addClass('subhover').end()
					   .find('ul.subnav').slideDown('slow');
			}, function() {
				$(this).find('span').removeClass('subhover').end()
					   .find('ul.subnav').slideUp('fast');
			});
		});
    </script>
    
    <ul class="nav" id="nav2">
    	<li><a href="#">首页</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">技术</a>
        	<ul class="subnav">
            	<li><a href="#">wordpress</a></li>
                <li><a href="#">php</a></li>
                <li><a href="#">jQuery</a></li>
                <li><a href="#">CSS</a></li>
            </ul>
        </li>
        <li><a href="#">影视</a>
        	<ul class="subnav">
            	<li><a href="#">电视剧</a></li>
                <li><a href="#">电影</a></li>
                <li><a href="#">舞台剧</a></li>
            </ul>
        </li>
        <li><a href="#">联系</a></li>
    </ul>
    